<template>
  <div class="mark-line">
    <div v-for="line in lines" v-show="lineStatus[line] || false" :key="line" :ref="line" class="line"
      :class="line.includes('x')? 'xline' : 'yline'"></div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted,ref } from "vue";
import { useDesignStore } from "../../../../../store/design";
import { emitter } from "../../../../../utils/emitter";

export default defineComponent({
  name: "align-line",
  setup() {
    const designStore = useDesignStore();
    const lines = ref(["xt", "xc", "xb", "yl", "yc", "yr"]); // 分别对应三条横线和三条竖线
    const diff = ref(3); // 相距 dff 像素将自动吸附
    const lineStatus = ref({
      xt: false,
      xc: false,
      xb: false,
      yl: false,
      yc: false,
      yr: false,
    });
    const curComponent = computed(() => designStore.curComponent);
    const pageComponents = computed(() => designStore.pageComponents);
    const showLine = () => {
      //  const lines = this.$refs
      //       const components = this.componentData
      //       const curComponentStyle = getComponentRotatedStyle(this.curComponent.style)
      //       const curComponentHalfwidth = curComponentStyle.width / 2
      //       const curComponentHalfHeight = curComponentStyle.height / 2
      
    };
    const hideLine = () => {
      Object.keys(lineStatus.value).forEach((line) => {
        lineStatus.value[line] = false;
      });
    };
    onMounted(() => {
      emitter.on("move", (isDownward, isRightward) => {
        showLine(isDownward, isRightward);
      });
      emitter.on("unmove", () => {
        hideLine();
      });
    });
    return { diff, lines, lineStatus, curComponent, pageComponents, showLine };
  },
});
</script>

<style scoped lang="less">
.ident-line {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
}

.x-line {
  border-top: 1px dashed var(--el-color-primary);
}

.y-line {
  border-left: 1px dashed var(--el-color-primary);
}
</style>
